<template>
  <div id="app">
    <!-- <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </nav> -->
    <TopHeader :key="key" />
    <Header />
    <router-view />
    <Footer />
    <login v-show="loginshow" @login="changekey" />
    <toast v-show="toastshow" />
  </div>
</template>
<script>
import { mapState, mapMutations, mapActions } from "vuex";
import Header from "@/components/Header.vue";
import TopHeader from "@/components/TopHeader.vue";
import Footer from "@/components/Footer.vue";
import login from "@/components/login.vue";
import toast from "@/components/toast.vue";

export default {
  data() {
    return {
      key: 1,
    };
  },
  components: {
    Header,
    TopHeader,
    Footer,
    login,
    toast,
  },
  created() {},
  methods: {
    ...mapMutations({
      changeloginshow: "changeloginshow",
      initialized: "user/initialized",
      changeshopshow: "changeshopshow",
    }),
    ...mapActions({
      asynctoasts: "asynctoasts",
    }),
    changekey() {
      // 组件更新
      this.key++;
    },
  },
  computed: {
    ...mapState(["loginshow", "toastshow", "shopshow"]),
  },
  watch: {
    // 监听路由的变化
    "$route.path": function (newval, oldval) {
      // console.log(newval, oldval);
      // 监听路由跳转，保证其他不同懒加载页面一样可以进行登录刷新获取code
      if (localStorage.getItem("token")) {
        // 有token就不需要重置vuex的状态
        return;
      }
      // 如果没有token加上购物车状态栏是true就执行这个，不然会一直执行弹窗
      if (this.shopshow) {
        this.changeshopshow(false);
        // 更新购物车状态
        this.initialized();
        this.asynctoasts({
          toastmsg: "登录状态失效，请重新登录",
          toastIcon: "warning",
        });
      }
    },
  },
};
</script>
<style lang="less">
#app {
  margin: 0 auto;
}
</style>
